<template>
  <div class="container">
    <el-dialog :title="titleText" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="formdata" ref="formdata" :rules="addFromRules">
        <el-form-item
          label="所属学科"
          prop="subjectID"
          v-if="!this.$route.params.id"
        >
          <el-select v-model="formdata.subjectID" class="addinput">
            <el-option
              :label="item.label"
              v-for="(item, i) in subjectList"
              :key="i"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input
            v-model="formdata.tagName"
            class="addinput"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormH">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/tags'
import { simple } from '@/api/hmmm/subjects'

export default {
  name: 'TagDialog',
  props: {
    tagslist: {
      type: Array,
      require: true
    },
    titleText: {
      type: String,
      require: true
    },
    formdata: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      dialogFormVisible: false, // 添加标签的弹出框的显示与隐藏
      addFromRules: {
        subjectID: [
          { required: true, message: '请选择所属学科', trigger: 'blur' }
        ],
        tagName: [
          { required: true, message: '请输入标签名称', trigger: 'blur' }
        ]
      },

      subjectList: []
    }
  },
  async created() {
    try {
      const { data } = await simple()
      // console.log(data)
      this.subjectList = data
    } catch (err) {
      console.log(err)
    }
  },
  methods: {
    // 弹层隐藏
    dialogFormH() {
      this.dialogFormVisible = false
    },
    async confirm() {
      // 调用validate进行表单验证
      this.$refs.formdata.validate(async valid => {
        if (!valid) return this.$message.error('请填写完整用户信息')
        // console.log(this.formdata)
        if (this.formdata.id) {
          // 修改
          await update({
            id: this.formdata.id,
            subjectID: this.formdata.subjectID,
            tagName: this.formdata.tagName
          })
          // console.log(data)
        } else {
          // 添加
          this.formdata.subjectID =
            this.$route.params.id || this.formdata.subjectID
          await add(this.formdata)
          // console.log(data)
        }
      })

      // 更新视图
      this.$emit('changetags')

      // 关闭弹出框
      this.dialogFormH()
    }
  }
}
</script>

<style scoped>
.addinput {
  width: 300px;
}

.dialog-footer {
  margin-left: 210px;
}

.el-form-item >>> .el-form-item__error {
  position: absolute !important;
  left: 77px;
  font-size: 14px;
}
</style>
